<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>汽车销售进销存管理系统</title>
	<link rel="shortcut icon" href="favicon.ico">
	<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
	<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
	<link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
	<link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
	<style>
		:root {
            --primary-color: #2989d8;
            --secondary-color: #1e5799;
            --accent-color: #207cca;
        }

        body {
            background-color: #f5f7fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            position: relative;
            overflow-x: hidden;
        }

        /* 粒子背景效果 */
        #particles-js {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 0;
            opacity: 0.3;
        }

        .wrapper {
            position: relative;
            z-index: 1;
        }

        .dashboard-header {
            background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 51%, var(--primary-color) 100%);
            color: white;
            border-radius: 5px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
        }

        .dashboard-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1485291571150-772bcfc10da5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center/cover;
            opacity: 0.1;
        }

        .feature-box {
            background: white;
            border-radius: 8px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            height: 100%;
            border-top: 3px solid var(--primary-color);
            position: relative;
            overflow: hidden;
        }

        .feature-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        }

        .feature-box::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(41,137,216,0.1) 0%, rgba(255,255,255,0.1) 100%);
            z-index: 0;
        }

        .feature-box > * {
            position: relative;
            z-index: 1;
        }

        .feature-icon {
            font-size: 40px;
            color: var(--primary-color);
            margin-bottom: 15px;
        }

        .system-overview {
            background: white;
            border-radius: 8px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
            border-top: 3px solid var(--primary-color);
        }

        .progress {
            height: 10px;
            margin-bottom: 15px;
            border-radius: 5px;
            background-color: #e9ecef;
        }

        .progress-bar {
            background-color: var(--primary-color);
        }

        .module-card {
            border-left: 4px solid var(--primary-color);
            margin-bottom: 15px;
            padding-left: 15px;
            transition: all 0.3s ease;
        }

        .module-card:hover {
            transform: translateX(5px);
        }

        .module-card h4 {
            color: var(--primary-color);
            font-weight: 600;
        }

        .tech-stack {
            list-style-type: none;
            padding-left: 0;
        }

        .tech-stack li {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
        }

        .tech-stack li:last-child {
            border-bottom: none;
        }

        .tech-stack li i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }

        .btn-outline-custom {
            color: white;
            border-color: white;
            background-color: transparent;
            transition: all 0.3s ease;
            margin: 5px;
        }

        .btn-outline-custom:hover {
            color: var(--primary-color);
            background-color: white;
            transform: translateY(-2px);
        }

        .timeline-item {
            position: relative;
            padding-bottom: 20px;
            border-left: 2px solid var(--primary-color);
            padding-left: 20px;
        }

        .timeline-item:last-child {
            border-left: 2px solid transparent;
        }

        .timeline-dot {
            position: absolute;
            left: -9px;
            top: 0;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: var(--primary-color);
            border: 3px solid white;
            box-shadow: 0 0 0 2px var(--primary-color);
        }

        .timeline-date {
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 5px;
        }

        .timeline-content {
            padding-left: 10px;
        }

        /* 汽车展示轮播 - 增强版 */
        .car-showcase {
            margin-bottom: 30px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0,0,0,0.2);
            position: relative;
            z-index: 1;
        }

        .car-showcase .owl-item img {
            height: 500px;
            object-fit: cover;
            width: 100%;
            transition: transform 0.5s ease;
        }

        .car-showcase .owl-item:hover img {
            transform: scale(1.05);
        }

        .car-showcase .owl-nav {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
            padding: 0 25px;
        }

        .car-showcase .owl-nav button {
            background: rgba(255,255,255,0.8) !important;
            width: 50px;
            height: 50px;
            border-radius: 50% !important;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-color) !important;
            font-size: 24px !important;
            transition: all 0.3s ease;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
        }

        .car-showcase .owl-nav button:hover {
            background: white !important;
            transform: scale(1.2);
        }

        .car-showcase .owl-dots {
            position: absolute;
            bottom: 20px;
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .car-showcase .owl-dot span {
            background: rgba(255,255,255,0.5) !important;
            border: 2px solid white !important;
        }

        .car-showcase .owl-dot.active span {
            background: white !important;
        }

        /* 品牌展示区 - 增强版 */
        .brand-showcase {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin: 20px 0;
        }

        .brand-item {
            width: 120px;
            height: 80px;
            margin: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            border-radius: 5px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: all 0.5s ease;
            padding: 15px;
            position: relative;
            overflow: hidden;
        }

        .brand-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: 0.5s;
        }

        .brand-item:hover::before {
            left: 100%;
        }

        .brand-item:hover {
            transform: translateY(-10px) scale(1.1);
            box-shadow: 0 15px 30px rgba(0,0,0,0.2);
        }

        .brand-item img {
            max-width: 100%;
            max-height: 100%;
            filter: grayscale(100%);
            opacity: 0.7;
            transition: all 0.5s ease;
        }

        .brand-item:hover img {
            filter: grayscale(0%);
            opacity: 1;
            transform: scale(1.1);
        }

        /* 汽车图片网格展示区 */
        .car-gallery {
            margin: 30px 0;
        }

        .gallery-title {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
        }

        .gallery-title h2 {
            display: inline-block;
            background: white;
            padding: 0 20px;
            position: relative;
            z-index: 1;
        }

        .gallery-title::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 1px;
            background: #ddd;
            z-index: 0;
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }

        .gallery-item {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: all 0.5s ease;
            height: 200px;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .gallery-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.2);
        }

        .gallery-item:hover img {
            transform: scale(1.1);
        }

        .gallery-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 15px;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
            color: white;
            transform: translateY(100%);
            transition: all 0.3s ease;
        }

        .gallery-item:hover .gallery-caption {
            transform: translateY(0);
        }

        /* 视差滚动效果 */
        .parallax-section {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            height: 400px;
            position: relative;
            margin: 50px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
            overflow: hidden;
        }

        .parallax-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
        }

        .parallax-content {
            position: relative;
            z-index: 1;
            max-width: 800px;
            padding: 0 20px;
        }

        /* 3D翻转卡片 */
        .flip-card {
            perspective: 1000px;
            height: 300px;
            margin-bottom: 30px;
        }

        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }

        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg);
        }

        .flip-card-front, .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        .flip-card-front {
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .flip-card-front img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .flip-card-back {
            background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
            color: white;
            padding: 20px;
            transform: rotateY(180deg);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .flip-card-back h3 {
            margin-bottom: 15px;
            color: white;
        }

        /* 浮动动画 */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }

        .floating {
            animation: float 3s ease-in-out infinite;
        }

        /* 脉冲动画 */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        /* 合作伙伴专区 */
        .partner-section {
            background: white;
            border-radius: 8px;
            padding: 30px;
            margin: 30px 0;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            border-top: 3px solid var(--primary-color);
        }

        .partner-logo {
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 15px;
            padding: 15px;
            background: white;
            border-radius: 5px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

        .partner-logo:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }

        .partner-logo img {
            max-height: 100%;
            max-width: 100%;
            filter: grayscale(100%);
            opacity: 0.7;
            transition: all 0.3s ease;
        }

        .partner-logo:hover img {
            filter: grayscale(0%);
            opacity: 1;
        }

        /* 响应式调整 */
        @media (max-width: 992px) {
            .car-showcase .owl-item img {
                height: 400px;
            }

            .gallery-grid {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            }
        }

        @media (max-width: 768px) {
            .dashboard-header {
                text-align: center;
            }

            .dashboard-header .col-sm-4 {
                margin-bottom: 20px;
            }

            .car-showcase .owl-item img {
                height: 300px;
            }

            .brand-item {
                width: 80px;
                height: 60px;
                margin: 10px;
            }

            .gallery-grid {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }

            .gallery-item {
                height: 150px;
            }
        }

        @media (max-width: 576px) {
            .car-showcase .owl-item img {
                height: 250px;
            }

            .gallery-grid {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            }

            .gallery-item {
                height: 120px;
            }
        }
	</style>
</head>

<body class="gray-bg">
<!-- 粒子背景 -->
<div id="particles-js"></div>

<div class="wrapper wrapper-content animated fadeIn">
	<div class="row border-bottom white-bg dashboard-header animated fadeIn">
		<div class="col-sm-4 text-center">
			<h2 class="floating">汽车销售进销存管理系统</h2>
			<p class="text-muted">专业汽车销售全流程信息化管理解决方案</p>

			<div class="brand-showcase">
				<div class="brand-item">
					<img src="https://logo.clearbit.com/bmw.com" alt="BMW">
				</div>
				<div class="brand-item">
					<img src="https://logo.clearbit.com/mercedes-benz.com" alt="Mercedes-Benz">
				</div>
				<div class="brand-item">
					<img src="https://logo.clearbit.com/audi.com" alt="Audi">
				</div>
				<div class="brand-item">
					<img src="https://logo.clearbit.com/toyota.com" alt="Toyota">
				</div>
				<div class="brand-item">
					<img src="https://logo.clearbit.com/honda.com" alt="Honda">
				</div>
				<div class="brand-item">
					<img src="https://logo.clearbit.com/ford.com" alt="Ford">
				</div>
				<div class="brand-item">
					<img src="https://logo.clearbit.com/chevrolet.com" alt="Chevrolet">
				</div>
				<div class="brand-item">
					<img src="https://logo.clearbit.com/volkswagen.com" alt="Volkswagen">
				</div>
			</div>

			<p class="text-muted">移动端扫描访问</p>
		</div>
		<div class="col-sm-4">
			<h2>系统概述</h2>
			<p>本系统专为汽车销售企业设计，实现从车辆采购、库存管理到销售出库的全流程信息化管理，支持多品牌、多车型管理，提供专业的销售分析和库存预警功能。</p>
			<div class="text-center">
				<a class="btn btn-outline-custom btn-rounded pulse" href="https://gitee.com/y_project/RuoYi-Cloud" target="_blank">
					<i class="fa fa-cloud"></i> 源码地址
				</a>
				<a class="btn btn-outline-custom btn-rounded pulse" href="http://ruoyi.vip" target="_blank">
					<i class="fa fa-home"></i> 在线文档
				</a>
			</div>
		</div>
		<div class="col-sm-4">
			<h4>项目进度</h4>
			<div class="progress">
				<div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 25%">
					<span class="sr-only">25% 完成</span>
				</div>
			</div>
			<p><strong>当前阶段：</strong> 需求分析与设计</p>
			<p><strong>预计完成：</strong> 2025年6月28日</p>
			<p><strong>当前版本：</strong> v1.0.0</p>
		</div>
	</div>

	<!-- 增强版汽车展示轮播 -->
	<div class="row">
		<div class="col-md-12">
			<div class="car-showcase">
				<div class="owl-carousel owl-theme">
					<div class="item">
						<img src="https://images.unsplash.com/photo-1494972308805-463d61949b12?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="豪华轿车">
					</div>
					<div class="item">
						<img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="SUV车型">
					</div>
					<div class="item">
						<img src="https://images.unsplash.com/photo-1541899481282-d53bffe3c35d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="跑车">
					</div>
					<div class="item">
						<img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="商务车">
					</div>
					<div class="item">
						<img src="https://images.unsplash.com/photo-1555215695-3004980ad54e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="电动车">
					</div>
					<div class="item">
						<img src="https://images.unsplash.com/photo-1542281286-9e0a16bb7366?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="混合动力车">
					</div>
					<div class="item">
						<img src="https://images.unsplash.com/photo-1504215680853-026ed2a45def?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="越野车">
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 合作伙伴专区 - 新增TOTO和HONDA内容 -->
	<div class="row">
		<div class="col-md-12">
			<div class="partner-section">
				<h2 class="text-center" style="margin-bottom: 30px;">报表查询</h2>
				<div class="row">
					<div class="col-md-6">
						<div class="feature-box">
							<div class="text-center">
								<img src="https://t8.baidu.com/it/u=3993301077,1493381758&fm=193" alt="Honda" style="height: 60px; margin-bottom: 15px;">
								<h3>汽车销售报表</h3>
								<p>本月的汽车销售额度</p>
								<div class="row">
									<div class="col-md-6">
										<ul>
											<li>奔驰</li>
											<li>宝马</li>
											<li>奥迪</li>
										</ul>
									</div>
									<div class="col-md-6">
										<ul>
											<li>特斯拉</li>
											<li>本田</li>
											<li>丰田</li>
										</ul>
									</div>
								</div>
								<a href="http://localhost:63342/RuoYi-master/ruoyi-admin/templates/tool/build/car-sales-report.html?_ijt=t5udpre6b0nrcl0401hhv7bejs&_ij_reload=RELOAD_ON_SAVE" class="btn btn-primary btn-sm" target="_blank">点击查看</a>
							</div>
						</div>
					</div>
					<div class="col-md-6">
						<div class="feature-box">
							<div class="text-center">
								<img src="https://bpic.51yuansu.com/pic3/cover/04/06/14/6152bc1f0427b_610.jpg?x-oss-process=image/resize,h_360,m_lfit/sharpen,100" alt="TOTO" style="height: 60px; margin-bottom: 15px;">
								<h3>汽车销售利润表</h3>
								<p>本月的销售额度以及销售利润</p>
								<div class="row">
									<div class="col-md-6">
										<ul>
											<li>奔驰金额</li>
											<li>宝马金额</li>
											<li>奥迪金额</li>
										</ul>
									</div>
									<div class="col-md-6">
										<ul>
											<li>特斯拉金额</li>
											<li>本田金额</li>
											<li>丰田金额</li>
										</ul>
									</div>
								</div>
								<a href="http://localhost:63342/RuoYi-master/ruoyi-admin/templates/tool/build/inventory-analysis.html?_ijt=t5udpre6b0nrcl0401hhv7bejs&_ij_reload=RELOAD_ON_SAVE" class="btn btn-primary btn-sm" target="_blank">点击查看</a>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<h4 class="text-center" style="margin: 30px 0 20px;">我们的合作伙伴</h4>
						<div class="d-flex flex-wrap justify-content-center">
							<div class="partner-logo">
								<img src="https://logo.clearbit.com/honda.com" alt="Honda">
							</div>
							<div class="partner-logo">
								<img src="https://logo.clearbit.com/toto.com" alt="TOTO">
							</div>
							<div class="partner-logo">
								<img src="https://logo.clearbit.com/toyota.com" alt="Toyota">
							</div>
							<div class="partner-logo">
								<img src="https://logo.clearbit.com/bmw.com" alt="BMW">
							</div>
							<div class="partner-logo">
								<img src="https://logo.clearbit.com/mercedes-benz.com" alt="Mercedes-Benz">
							</div>
							<div class="partner-logo">
								<img src="https://logo.clearbit.com/audi.com" alt="Audi">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 汽车图片网格展示区 -->
	<div class="row">
		<div class="col-md-12">
			<div class="car-gallery">
				<div class="gallery-title">
					<h2>热门车型展示</h2>
				</div>
				<div class="gallery-grid">
					<div class="gallery-item">
						<img src="https://images.unsplash.com/photo-1553440569-bcc63803a83d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="豪华轿车">
						<div class="gallery-caption">
							<h5>豪华轿车系列</h5>
							<p>极致舒适与尊贵体验</p>
						</div>
					</div>
					<div class="gallery-item">
						<img src="https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="跑车">
						<div class="gallery-caption">
							<h5>跑车系列</h5>
							<p>速度与激情的完美结合</p>
						</div>
					</div>
					<div class="gallery-item">
						<img src="https://images.unsplash.com/photo-1520340356584-f9917d1eea6f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="SUV">
						<div class="gallery-caption">
							<h5>SUV系列</h5>
							<p>空间与性能的完美平衡</p>
						</div>
					</div>
					<div class="gallery-item">
						<img src="https://images.unsplash.com/photo-1511919884226-fd3cad34687c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="电动车">
						<div class="gallery-caption">
							<h5>电动车系列</h5>
							<p>环保与科技的完美融合</p>
						</div>
					</div>
					<div class="gallery-item">
						<img src="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="商务车">
						<div class="gallery-caption">
							<h5>商务车系列</h5>
							<p>商务出行的理想选择</p>
						</div>
					</div>
					<div class="gallery-item">
						<img src="https://images.unsplash.com/photo-1502877338535-766e1452684a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="越野车">
						<div class="gallery-caption">
							<h5>越野车系列</h5>
							<p>征服各种复杂地形</p>
						</div>
					</div>
					<div class="gallery-item">
						<img src="https://images.unsplash.com/photo-1542362567-b07e54358753?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="混合动力车">
						<div class="gallery-caption">
							<h5>混合动力系列</h5>
							<p>高效节能的出行方案</p>
						</div>
					</div>
					<div class="gallery-item">
						<img src="https://pic.rmb.bdstatic.com/bjh/news/6ed53fe1cc1ffe6898a4e78a4d6681f2.jpeg" alt="家庭用车">
						<div class="gallery-caption">
							<h5>家庭用车系列</h5>
							<p>安全舒适的家庭选择</p>
						</div>
					</div>
					<div class="gallery-item">
						<img src="https://wx4.sinaimg.cn/large/008AGV4Yly1hz0dt4iwpoj31yi0u0arm.jpg" alt="小米">
						<div class="gallery-caption">
							<h5>小米新能源</h5>
							<p>完美车型</p>
						</div>
					</div>
					<div class="gallery-item">
						<img src="https://img4.pcauto.com.cn/pcauto/images/auto_hj/20231031/14693197.jpg" alt="红旗">
						<div class="gallery-caption">
							<h5>红旗</h5>
							<p>国产车型</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 视差滚动区 -->
	<div class="parallax-section" style="background-image: url('https://images.unsplash.com/photo-1485291571150-772bcfc10da5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');">
		<div class="parallax-content">
			<h2 class="floating">专业汽车销售解决方案</h2>
			<p class="lead">从采购到销售，一站式管理您的汽车业务</p>
			<a href="#" class="btn btn-primary btn-lg pulse">立即体验</a>
		</div>
	</div>

	<div class="wrapper wrapper-content animated fadeInUp">
		<div class="row">
			<div class="col-md-8">
				<div class="row">
					<div class="col-md-6">
						<div class="flip-card">
							<div class="flip-card-inner">
								<div class="flip-card-front">
									<img src="https://img.pcauto.com.cn/images/ttauto/2025/02/19/7472698328971624999/d8aa684e287442a180dd6ba20a28d20b~tplv-resize:0:0.webp.png?rk3s=ad083a4c&x-expires=1740522019&x-signature=NtH36t2c%2BHBKyu74nFhPag%2FpdnI%3D" alt="采购管理">
								</div>
								<div class="flip-card-back">
									<h3>车辆采购管理</h3>
									<p>支持车辆采购订单创建、审核、执行全流程处理，包括选择汽车厂商、添加采购车辆明细、填写采购日期、预计到货日期等信息。</p>
									<ul>
										<li>车辆采购订单创建</li>
										<li>厂商信息管理</li>
										<li>采购订单审核</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-6">
						<div class="flip-card">
							<div class="flip-card-inner">
								<div class="flip-card-front">
									<img src="https://img0.baidu.com/it/u=91937560,1723169107&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500" alt="销售管理">
								</div>
								<div class="flip-card-back">
									<h3>汽车销售管理</h3>
									<p>支持汽车销售订单全流程处理，包括客户信息管理、试驾记录、购车贷款计算、保险代办等增值服务。</p>
									<ul>
										<li>客户信息管理</li>
										<li>试驾记录管理</li>
										<li>销售订单处理</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-6">
						<div class="flip-card">
							<div class="flip-card-inner">
								<div class="flip-card-front">
									<img src="https://img0.baidu.com/it/u=2091249480,3139759349&fm=253&fmt=auto&app=138&f=JPEG?w=866&h=500" alt="库存管理">
								</div>
								<div class="flip-card-back">
									<h3>车辆库存管理</h3>
									<p>实时监控车辆库存状态，支持多仓库管理，提供库存预警功能，定期对库存车辆进行盘点。</p>
									<ul>
										<li>多仓库车辆管理</li>
										<li>库存预警设置</li>
										<li>车辆状态跟踪</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-6">
						<div class="flip-card">
							<div class="flip-card-inner">
								<div class="flip-card-front">
									<img src="https://pic.rmb.bdstatic.com/bjh/news/1f3841eff474c5b2139864a60515b868.png" alt="销售分析">
								</div>
								<div class="flip-card-back">
									<h3>销售分析报表</h3>
									<p>从销售、采购、库存等多个维度生成专业报表，支持自定义时间范围查询、数据导出及图表展示。</p>
									<ul>
										<li>销售业绩分析</li>
										<li>库存周转分析</li>
										<li>车型销售排行</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="col-md-4">
				<div class="system-overview">
					<h3>技术架构</h3>
					<ul class="tech-stack">
						<li><i class="fa fa-check text-success"></i> 核心框架：Spring Boot</li>
						<li><i class="fa fa-check text-success"></i> 安全框架：Apache Shiro</li>
						<li><i class="fa fa-check text-success"></i> 模板引擎：Thymeleaf</li>
						<li><i class="fa fa-check text-success"></i> 持久层框架：MyBatis</li>
						<li><i class="fa fa-check text-success"></i> 定时任务：Quartz</li>
						<li><i class="fa fa-check text-success"></i> 数据库连接池：Druid</li>
						<li><i class="fa fa-check text-success"></i> 工具类：Fastjson</li>
					</ul>

					<h3>运行环境</h3>
					<ul class="tech-stack">
						<li><i class="fa fa-desktop"></i> 操作系统：Windows 10或以上</li>
						<li><i class="fa fa-code"></i> JDK版本：JDK 8或以上</li>
						<li><i class="fa fa-database"></i> 数据库：MySQL 5.7或以上</li>
						<li><i class="fa fa-globe"></i> 浏览器：Chrome、Edge、Firefox等主流浏览器</li>
					</ul>
				</div>

				<div class="system-overview">
					<h3>项目进度计划</h3>
					<div class="timeline-item">
						<div class="timeline-dot"></div>
						<div class="timeline-date">第17周，周一</div>
						<div class="timeline-content">
							创建Gitee仓库，搭建开发环境，分析汽车销售业务需求，设计数据库表
						</div>
					</div>
					<div class="timeline-item">
						<div class="timeline-dot"></div>
						<div class="timeline-date">第17周，周二</div>
						<div class="timeline-content">
							完成车辆信息管理、厂商管理模块的增删改查
						</div>
					</div>
					<div class="timeline-item">
						<div class="timeline-dot"></div>
						<div class="timeline-date">第17周，周三至周五</div>
						<div class="timeline-content">
							完成客户管理、采购与销售模块，处理库存联动逻辑
						</div>
					</div>
					<div class="timeline-item">
						<div class="timeline-dot"></div>
						<div class="timeline-date">第18周，周一</div>
						<div class="timeline-content">
							实现车辆库存管理模块，支持多仓库管理
						</div>
					</div>
					<div class="timeline-item">
						<div class="timeline-dot"></div>
						<div class="timeline-date">第18周，周二</div>
						<div class="timeline-content">
							实现销售分析报表，测试与完善系统
						</div>
					</div>
					<div class="timeline-item">
						<div class="timeline-dot"></div>
						<div class="timeline-date">第18周，周三至周五</div>
						<div class="timeline-content">
							撰写项目总结与使用文档，准备答辩材料
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-12">
				<div class="system-overview">
					<h3>交付成果</h3>
					<div class="row">
						<div class="col-md-3">
							<div class="feature-box text-center">
								<div class="feature-icon">
									<i class="fa fa-code"></i>
								</div>
								<h4>系统代码</h4>
								<p>完整的系统代码和数据库初始化脚本(基于RuoYi)</p>
							</div>
						</div>
						<div class="col-md-3">
							<div class="feature-box text-center">
								<div class="feature-icon">
									<i class="fa fa-file-word-o"></i>
								</div>
								<h4>项目文档</h4>
								<p>汽车销售系统说明文档(系统结构、数据表结构、功能简介、使用说明)</p>
							</div>
						</div>
						<div class="col-md-3">
							<div class="feature-box text-center">
								<div class="feature-icon">
									<i class="fa fa-video-camera"></i>
								</div>
								<h4>演示视频</h4>
								<p>汽车销售系统演示录屏讲解视频MP4视频</p>
							</div>
						</div>
						<div class="col-md-3">
							<div class="feature-box text-center">
								<div class="feature-icon">
									<i class="fa fa-file-powerpoint-o"></i>
								</div>
								<h4>汇报PPT</h4>
								<p>汽车销售系统项目汇报PPT演示文稿</p>
							</div>
						</div>
					</div>
					<div class="alert alert-info">
						<strong>提交方式：</strong> 邮件地址:liuhj@lyvc.edu.cn，企业微信，QQ187379605<br>
						<strong>截止日期：</strong> 2025年6月28日周六之前
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/js/plugins/wow/wow.min.js}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
	$(document).ready(function () {
        // 初始化动画效果
        new WOW().init();

        // 初始化粒子背景
        particlesJS('particles-js', {
            particles: {
                number: { value: 80, density: { enable: true, value_area: 800 } },
                color: { value: "#2989d8" },
                shape: { type: "circle" },
                opacity: { value: 0.5, random: true },
                size: { value: 3, random: true },
                line_linked: { enable: true, distance: 150, color: "#2989d8", opacity: 0.4, width: 1 },
                move: { enable: true, speed: 2, direction: "none", random: true, straight: false, out_mode: "out" }
            },
            interactivity: {
                detect_on: "canvas",
                events: {
                    onhover: { enable: true, mode: "repulse" },
                    onclick: { enable: true, mode: "push" }
                }
            }
        });

        // 初始化汽车展示轮播
        $('.car-showcase .owl-carousel').owlCarousel({
            items: 1,
            loop: true,
            autoplay: true,
            autoplayTimeout: 3000,
            autoplayHoverPause: true,
            nav: true,
            dots: true,
            animateOut: 'fadeOut',
            animateIn: 'fadeIn'
        });

        // 鼠标悬停效果
        $('.feature-box, .gallery-item, .brand-item, .partner-logo').hover(
            function() {
                $(this).addClass('shadow');
            },
            function() {
                $(this).removeClass('shadow');
            }
        );

        // 模拟进度条动画
        var progress = 25;
        var progressInterval = setInterval(function() {
            progress += 1;
            $('.progress-bar').css('width', progress + '%').attr('aria-valuenow', progress);
            if (progress >= 100) {
                clearInterval(progressInterval);
            }
        }, 1000);

        // 点击功能模块显示详细信息
        $('.feature-box').click(function() {
            var title = $(this).find('h3').text();
            var content = $(this).find('p').text() + '<br><br><ul>' + $(this).find('ul').html() + '</ul>';

            // 根据标题添加不同的汽车图片
            var imgUrl = '';
            switch(title) {
                case '车辆采购管理':
                    imgUrl = 'https://images.unsplash.com/photo-1550355291-bbee04a92027?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80';
                    break;
                case '汽车销售管理':
                    imgUrl = 'https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80';
                    break;
                case '车辆库存管理':
                    imgUrl = 'https://images.unsplash.com/photo-1489824904134-891ab86532c9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80';
                    break;
                case '销售分析报表':
                    imgUrl = 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80';
                    break;
                default:
                    imgUrl = 'https://images.unsplash.com/photo-1485291571150-772bcfc10da5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80';
            }

            content = `<div class="row">
                <div class="col-md-6">
                    <img src="${imgUrl}" alt="${title}" style="width:100%;border-radius:5px;margin-bottom:15px;">
                </div>
                <div class="col-md-6">
                    <h4>${title}</h4>
                    ${content}
                </div>
            </div>`;

            layer.open({
                type: 1,
                title: title + ' - 详细功能',
                skin: 'layui-layer-rim',
                area: ['800px', '500px'],
                content: content
            });
        });

        // 视差滚动效果
        $(window).scroll(function() {
            var scrollPosition = $(this).scrollTop();
            $('.parallax-section').css('background-position', 'center ' + -(scrollPosition * 0.3) + 'px');
        });

        // 图片网格悬停效果
        $('.gallery-item').hover(
            function() {
                $(this).find('.gallery-caption').stop().animate({bottom: '0'}, 200);
            },
            function() {
                $(this).find('.gallery-caption').stop().animate({bottom: '-100%'}, 200);
            }
        );
    });
</script>
</body>
</html>